<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >

    <a-spin :spinning="confirmLoading">
      <div >
        <a-form-item  label="选择加入企业">
          <a-select   show-search
                      placeholder="请选择要加入得企业"
                      option-filter-prop="children"
                      style="width:80%"
                      :labelInValue=true
                      :filter-option="filterOption"
                      @change="handleChange">
            <a-select-option v-for="(site,index) in treeData" :key="index" :value="site.id">{{site.enterpriseName}}</a-select-option>
          </a-select>
          <a-button  @click="handleOk(1)">
            申请变更
          </a-button>
        </a-form-item>

      </div>
      <table>
        <tr v-if="DealerRegrpList.length>0" v-for="(item, index) in DealerRegrpList">
          <td>
            所属企业:{{item.groupName}} &nbsp;
          </td>
          <td>
            操作类型:
            <span v-if="item.attachType==0">脱离</span>
            <span v-if="item.attachType==1">加入</span> &nbsp;
          </td>
          <td>
            生效时间:{{item.effectiveDate}}
          </td>
          <td>
            审批状态:
            <span v-if="item.status==1">审批中</span>
            <span v-if="item.status==2">已批准</span>
            <span  v-if="item.status==3">已拒绝</span>&nbsp;
          </td>
          <td>
            操作
            <a-button v-if="item.attachType==1&&index==0" @click="handleOk(0)">脱离</a-button>
          </td>
        </tr>
      </table>
<!--      <div v-if="DealerRegrpList.length>0" v-for="(item, index) in DealerRegrpList" >-->
<!--        <div v-if="index==0">-->
<!--          <a-form :form="form" >-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="所属企业">-->
<!--              <span>{{item.groupName}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="操作类型">-->
<!--              <span v-if="item.attachType==0">脱离</span>-->
<!--              <span v-if="item.attachType==1">加入</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="生效时间">-->
<!--              <span>{{item.effectiveDate}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="审批状态">-->
<!--              <span v-if="item.status==1">审批中</span>-->
<!--              <span v-if="item.status==2">已批准</span>-->
<!--              <span  v-if="item.status==3">已拒绝</span>-->
<!--            </a-form-item>-->

<!--          </a-form>-->
<!--          <div style="text-align:center;">-->
<!--            <a-button v-if="item.attachType==2&&item.status==2" @click="handleOk (0)">-->
<!--              申请脱离-->
<!--            </a-button>-->
<!--            <a-button v-else-if="item.attachType==1&&item.status==2" @click="handleOk(1)">-->
<!--              申请加入-->
<!--            </a-button>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div v-else-if="index!=0">-->
<!--          <div>历史记录</div>-->
<!--          <a-form :form="form" >-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="所属企业">-->
<!--              <span>{{item.groupName}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="操作类型">-->
<!--              <span v-if="item.attachType==0">脱离</span>-->
<!--              <span v-if="item.attachType==1">加入</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="生效时间">-->
<!--              <span>{{item.effectiveDate}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="审批状态">-->
<!--              <span v-if="item.status==1">审批中</span>-->
<!--              <span v-if="item.status==2">已批准</span>-->
<!--              <span  v-if="item.status==3">已拒绝</span>-->
<!--            </a-form-item>-->
<!--          </a-form>-->

<!--        </div>-->
<!--      </div>-->

    </a-spin>
  </a-drawer>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import { getEnterpriseList, queryByEnterpriseId } from '@/api/api'
  import pick from 'lodash.pick'
  import moment from "moment"
  import Vue from 'vue'
  import { USER_INFO } from '@/store/mutation-types'

  export default {
    name: "CxmDealerRegrpModal",
    data () {
      return {
        title:"集团变更",
        visible: false,
        model: {},
        DealerRegrpList:[],
        DealerRegrp:{},
        enterpriseId:'',
        enterpriseName:'',
        treeData: [],
        dictDisabled:true,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          add: "/cxm/cxmDealerRegrp/add",
          edit: "/cxm/cxmDealerRegrp/edit",
        },
      }
    },
    created () {
    },
    methods: {
      add (depart) {
        this.visible = true;
        this.enterpriseId =depart.id;
        this.enterpriseName =depart.enterpriseName;
        let params = {
          id :depart.id
        }
        queryByEnterpriseId(params).then((res)=>{
          if(res){
            this.DealerRegrpList = res.result
          }else{
            console.log("error")
          }
        })
        this.getEnterprise();

      },
      getEnterprise(){
        var that = this
        getEnterpriseList().then((res) => {
          if (res.success) {
            that.treeData = res.result
          }
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk (value) {
        const that = this;
        // 触发表单验证
        let userinfo = Vue.ls.get(USER_INFO);
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = this.url.add;
            let method = 'post';
            that.model.attachType = value
            if(that.model.attachType=='0'){
              this.DealerRegrp = this.DealerRegrpList[0]
              that.model.groupId = this.DealerRegrp.groupId
              that.model.groupName = this.DealerRegrp.groupName
            }
            that.model.dealerId= this.enterpriseId;
            that.model.dealerName= this.enterpriseName;
            that.model.applyUser= userinfo.realname;
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.applyDate = formData.applyDate?formData.applyDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.approveDate = formData.approveDate?formData.approveDate.format('YYYY-MM-DD HH:mm:ss'):null;

            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                // that.$message.success(res.message);
                that.$emit('ok');
                if(value==0){
                  this.$message.success("脱离成功");
                }else{
                  this.$message.success("加入成功");
                }
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },
      handleChange(value) {
        this.model.groupId = value.key
        this.model.groupName = value.label
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },



    }
  }
</script>

<style lang="less" scoped>

</style>